<template>
      <div class="container" style="margin: 30vh auto;">
        <div class="drop">
          <div class="content">
            <h2>{{source}}登录</h2>
            <form  @submit.prevent="LoginSubmit">
              <div class="inputBox">
                <input type="text" placeholder="Username" v-model="username" required>
              </div>
              <div class="inputBox">
                <input type="password" placeholder="Passwoord" v-model="password" required>
              </div>
              <div class="inputBox">
                <input style="color:#fff;" type="submit" value="登录" >
              </div>
            </form>
          </div>
        </div>
        <a :href="source === '管理员' ? '/stu-login' : '/login'" class="btns">{{source === '管理员' ? '学生登录' : '管理员登录'}}</a>
        <a href="#" class="btns signup" @click="openDialog">注册</a>
      </div>

  <el-dialog v-model="showForm" v-if="showForm" title="注册" width="500">
    <StudentForm :data="studentForm" @handler="showForm = false;"/>
  </el-dialog>
</template>

<script lang="ts" setup>
    import {ref} from 'vue'
    import {ElMessage} from "element-plus";
    import {Student} from "../types";
    import StudentForm from "./StudentForm.vue";

    const showForm = ref(false)
    const studentForm = ref<Student>()

    //props
    const props = defineProps({
        source: {
          type: String,
          required: true,
        }
    })

    const emit = defineEmits(['handler'])
    const username = ref('')
    const password = ref('')

    const LoginSubmit = ()=>{
        console.log(`登录${username.value}====${password.value}`)
        emit('handler',username.value,password.value)
        return false   //阻止表单默认提交事件
    }
    const openDialog = () => {
      if (props.source === '管理员'){
        ElMessage.warning("暂未开启管理员注册")
        return
      }

      showForm.value = true
      studentForm.value = {}

    }
</script>

<style scoped>

/* google front */
/* @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap'); */
@import '../css/google-front.css';

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #eff0f4;
}

.container{
    position: relative;
    justify-content: center;
    align-items: center;
    width: 320px;
    left: -80px;
}

.container .drop{
    position: relative;
    width: 350px;
    height: 350px;
    box-shadow: inset 20px 20px 20px rgba(0, 0, 0, .05),
    25px 35px 20px rgba(0, 0, 0, .05),
    25px 30px 30px rgba(0, 0, 0, .05),
    inset -20px -20px 25px rgba(255, 255, 255, 0.9);
    transition: 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 52% 48% 33% 67% / 38% 45% 55% 62%;
}

.container .drop:hover{
    border-radius: 50%;
}

.container .drop::before{
    content: '';
    position: absolute;
    top:50px;
    left: 85px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.9;
}
.container .drop::after{
    content: '';
    position: absolute;
    top:90px;
    left: 110px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.9;
}

.container .drop .content{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 40px;
    gap: 15px;
}

.container .drop .content h2{
    position: relative;
    color: #333;
    font-size: 1.5em;
}
.container .drop .content form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.container .drop .content form .inputBox{
    position: relative;
    width: 225px;
    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, .1),
    inset -2px -5px 10px rgba(255, 255, 255, 1),
    15px 15px 10px rgba(0, 0, 0, .05),
    15px 10px 15px rgba(0, 0, 0, .05);
    border-radius: 25px;
}

.container .drop .content form .inputBox::before{
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}

.container .drop .content form .inputBox input{
    border: none;
    outline: none;
    background-color: transparent;
    width: 100%;
    font-size: 1em;
    padding: 10px 15px;
}
.container .drop .content form .inputBox input[type="submit"] {
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 0.1em;
    font-weight: 500;

}
.container .drop .content form .inputBox:last-child {
    width: 120px;
    background-color: #ff0f5b;
    box-shadow: inset 2px 5px 10px rgba(0, 0, 0, .1),
    15px 15px 10px rgba(0, 0, 0, .05),
    15px 10px 15px rgba(0, 0, 0, .05);
    transition: 0.5s;
}
.container .drop .content form .inputBox:last-child:hover{
    width: 150px;
}

.btns{
    position: absolute;
    width: 120px;
    height: 120px;
    right: -120px;
    bottom: 0;
    background-color:#c61dff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    color: #fff;
    line-height: 1.2em;
    letter-spacing: 0.1em;
    font-size: 0.8em;
    transition: 0.25s;
    text-align: center;
    box-shadow: inset 10px 10px 10px rgba(190, 1, 254, .05),
    15px 25px 10px rgba(190, 1, 254, .1),
    15px 20px 20px rgba(190, 1, 254, .1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
    border-radius: 44% 56% 65% 35% / 57% 58% 42% 43%;
}

.btns:hover{
    border-radius: 50%;
}
.btns::before{
    content: '';
    position: absolute;
    top:15px;
    left: 30px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.45;
}

.btns.signup{
    bottom: 150px;
    right: -140px;
    width: 80px;
    height: 80px;
    border-radius: 49% 51% 52% 48% / 63% 59% 41% 37%;
    background-color: #01b4ff;
    box-shadow: inset 10px 10px 10px rgba(1, 180, 255, .05),
    15px 25px 10px rgba(1, 180, 255, .1),
    15px 20px 20px rgba(1, 180, 255, .1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
}
.btns.signup::before{
    left: 20%;
    width: 15px;
    height: 15px;

}
.btns:hover{
    border-radius: 50%;
}
</style>